<template>
  <div class="upload">
    <ChunkUpload :options="options" :extra="extra" positionType="bottomRight" @change="changeFile"
                 @completed="uploadCompleted" @close="hideDrawer"></ChunkUpload>
  </div>
</template>

<script>
  import ChunkUpload from '@/components/uploader'
  import { handleDownUrl } from '@/util/util'

  export default {
    name: 'Upload',
    components: {
      ChunkUpload
    },
    props: {
      uploadText:{
        type: String,
        default: '分片上传',
      },
      // desc:{
      //   type: String,
      //   default: '分片上传',
      // }
    },
    data() {
      return {
        uploadList: [],
        completed: false, // 是否上传完成
        loadedFile: this.fileList,
        extra: {
          btnOptions: {
            single: this.single,
            btnText: this.uploadText,
            bigFileSize: this.bigFileSize,
            attrs: this.attrs,
            tipText: '超过10MB分片上传！'
          },
          desc: this.desc
        },
        options:{
          chunkSize: '10240000',//超过这个大小文件开始分片上传
        }
      }
    },
    methods: {
      uploadCompleted(completed) {
        this.completed = completed
      },


      changeFile({ file, fileList }) {
        this.uploadList = fileList
        this.$emit('addFile', {
          file,
          uploadList: fileList
        })
      },

      hideDrawer(done) {
        const hide = () => {
          this.uploadList = []
          this.loadedFile = []
          done()
        }

        if (!this.completed) {
          // 文件还在上传中时，关闭弹窗
          this.$confirm('文件在上传中，确认关闭该窗口？', '温馨提示', {
            confirmButtonText: '直接关闭',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              hide()
            })
            .catch(() => {})
          return
        }

        // if (this.uploadList.length) {
        //   // 文件已经上传完成，但并未保存时，关闭弹窗
        //   this.$confirm('当前文件已上传完成，是否进行保存上传?', '温馨提示', {
        //     distinguishCancelAndClose: true, // 将回调的action分为close和cancel
        //     confirmButtonText: '保存',
        //     cancelButtonText: '直接关闭',
        //     type: 'warning'
        //   })
        //     .then(() => {
        //       this.sumbit()
        //     })
        //     .catch(action => {
        //       if (action === 'cancel') {
        //         hide()
        //       }
        //     })
        //   return
        // }

        hide()
      },
      handleHide() {
        this.hideDrawer(() => {
          this.visible = false
        })
      }
    }
  }
</script>
<style scoped>
  .upload{
    display: inline-block;
  }
</style>
<style lang="scss">
  .drawer-upload {
    .el-drawer__header{
      display: none;
    }
    .el-upload--text {
      display: none;
    }
    .btn-footer {
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
  }
</style>
